<template>
    <div class="ymsbanner gift">
        <h1 class="title">PLEASE CHOOSE A GIFT</h1>
        <ul class="list">
            <li class="list-item" v-for="(item, index) in list" :key="index">
                <p>{{item.giftName}}</p>
                <img :src="item.giftImage" alt="">
                <button @click="selectGift(item)">Get It Now</button>
            </li>
        </ul>
    </div>
</template>

<script>
    import {post} from '../../api/index'
    export default {
        data() {
            return {
                params: {
                    asin: '',
                },
                list: []
            }
        },
        methods: {
            getGiftList() {
                post('/landing_page/selectGiftInfo', this.params).then(res => {
                    if (res.code === 200) {
                        this.list = res.data || []
                    }
                })
            },
            selectGift(data) {
                let params = {
                    customerInformationId: this.params.customerInformationId,
                    orderId: this.params.orderId,
                    giftId: data.giftId
                }
                post('/landing_page/recordCustomerGifts', params).then(res => {
                    if (res.code === 200) {
                        this.$router.push({path:'/guide', query: {orderId: this.params.customerInformationId, orderImage:this.params.orderImage, asin: this.params.asin}})
                    }
                })
            }
        },
        mounted() {
            this.params = this.$route.query;
            if (!this.params.asin) {
                this.$router.replace('/');
                return
            }
            this.getGiftList();
        }
    }
</script>

<style lang="less" scoped>
.ymsbanner{
    width: 100%;
    height: 150px;
    line-height: 150px;
    background-image: url(../../assets/registration.jpg);
    background-repeat: no-repeat;
    background-size: 100% auto;
    .title{
        text-align: center;
        font-size: 56px;
        color: #fff;
    }
}
.gift{
    .list{
        line-height: 15px;
        overflow: hidden;
        list-style: none;
        width: 100%;
        max-width: 800px;
        margin: 0 auto;
        padding: 0;
        &-item{
            float: left;
            width: 100%;
            max-width: 200px;
            background: #fff;
            border: 1px solid #aaa;
            border-radius: 5px;
            padding: 20px 15px;
            margin: 15px;
            text-align: center;
            img{
                width: 100%;
            }
            p{
                text-align: left;
                margin-bottom: 8px;
            }
            button{
                margin-top: 15px;
                text-align: center;
                width: 70%;
                padding: 12px 0;
                background: #fb9c2e;
                border-color: #fb9c2e;
                border: none;
                outline: none;
                border-radius: 5px;
                cursor: pointer;
                font-weight: 700;
            }
        }
    }
}
        
@media only  screen and  (max-width:900px){
    .gift{
        background: none;
    }
    .gift .title{
        font-size: 28px;
        line-height: 1;
        color: #fb9c2e;
        padding: 25px 0;
    }
    .gift .list .list-item{
        float: none !important;;
        width: 80% !important;
        max-width: 80% !important;
        margin: 0 auto !important;
        margin-bottom: 16px !important;
    }
}
</style>